<template>
    <div class="SqlIo">
       <el-row class="header">
           <el-col :span="12" >
               <div class="titleText">
                    <p>CPU Load</p>
               </div>
               
           </el-col>
           <el-col :span="12" >
               <div class="titleText">
                   <p>内存使用信息</p>
               </div>
            
           </el-col>
       </el-row>
       <el-row class="main" :gutter='20'>
           <el-col :span="12">
               <div id="ioRead" style="height: 100%">
                   <v-Cpuinfo></v-Cpuinfo>
               </div>
           </el-col>
           <el-col :span="12">
               <div id="ioWrite" style="height: 100%">
                   
                   <v-MemoryInfo></v-MemoryInfo>
               </div>
           </el-col>
       </el-row>

   </div>
</template>>

<script>
import { fetchData } from '@/api/index.js';
import bus from "common/bus.js";
import vCpuinfo from './Cpuinfo.vue'
import vMemoryInfo from './MemoryInfo.vue'
export default {
    data() {
        return {
           postData: {
                opera: 'hostconnect',
                curPage: 1,
                pageSize: 2000,
                sort: {
                    sortColumn: 'monid',
                    sortOrders: 'asc'
                },
                filtersType: 'exclude',
                filters: {
                    "os_type": "Network"
                },
            },
            initData:'',
            selectedMonID:''
            
        }
    },
    components:{
        vCpuinfo,
        vMemoryInfo

    },
    created() {
        bus.$on("selectedMonIDMysql", (msg) => {
      
      this.selectedMonID = msg;
      // this.postData.filters.monid = this.selectedMonID.selectedOSMonID;
      // this.getData();
      
      
          this.initGetData();
      
      
    });

    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });
       
       
    },
    mounted() {
        
    },
    computed: {

    },
    methods: {
        initGetData(){
            fetchData({
                postData : JSON.stringify(this.postData)
            }).then((res) => {
                if(res){
                     this.initData=res;
                     bus.$emit('MysqlInitChart',[res,this.selectedMonID])
                }
               
               
            });
        },
       
    },
    beforeDestroy() {
    
        
        
    },
   
}
</script>

<style scoped>
.header{
    height: 10%;
    margin-top: 2%;
    overflow: hidden;
    
}

.titleText>>> .el-form-item__label{
    color: rgb(248, 248, 239);
    line-height: 16px;
    font-size: medium;
    padding: 0 0 0 0;
}
.titleText>>> .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    margin-bottom: 0px;
    margin-right: 0px;
}
.titleText{
    text-align: center;
    box-shadow: 0px 0px 20px rgb(1, 40, 107) inset !important;
    width: 60%;
    margin: 0 0 0 14% !important;
    border-radius: 20px;
    color: honeydew;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
</style>